<template>
  <div class="container">
    <div class="change-btn" v-if="isTypeChart" @click="changeChart">事件类型图表</div>
    <div class="change-btn" v-else @click="changeChart">路段事故图表</div>
    <div class="close" @click="closeCharts">×</div>
    <div class="charts" id="type-charts" v-if="typeShow">
      <div id="type-rose" class="rose"></div>
      <div id="type-column" class="column"></div>
    </div>
    <div class="charts" id="road-charts" v-else>
      <div id="road-rose" class="rose"></div>
      <div id="road-column" class="column"></div>
    </div>
  </div>
</template>

<script setup>
import { Query } from '../../../../../../Hooks/useQuery'
import { Rose, Column } from '@antv/g2plot'
import { closeCharts } from './Hooks/useShowCharts'

let typeShow = ref(true)
let isTypeChart = ref(false)

function changeChart() {
  isTypeChart.value = !isTypeChart.value
  typeShow.value = !typeShow.value
}

function queryEventData() {
  let service = {
    name: 'guanggu',
    layerId: 2
  }
  let data
  Query.queryByLayer({
    service,
    callback: querySuccess
  })

  function querySuccess(res) {
    data = res.map((item) => item.values_.values_)

    // 获取事件类型信息
    let type = ['碰撞', '刮擦', '失火', '其他']
    let value = [
      data.filter((item) => item.事件类型 === '碰撞').length,
      data.filter((item) => item.事件类型 === '刮擦').length,
      data.filter((item) => item.事件类型 === '失火').length,
      data.filter((item) => item.事件类型 === '其他').length
    ]
    let typeArr = []
    for (let i = 0; i < 4; i++) {
      let obj = {}
      obj.type = type[i]
      obj.value = value[i]
      typeArr.push(obj)
    }

    // 获取道路信息
    let roads = []
    data.forEach((item) => {
      if (roads.every((road) => road !== item.发生地点)) {
        if (item.发生地点.length < 5) {
          roads.push(item.发生地点)
        }
      }
    })

    let values = []
    roads.forEach((road) => {
      values.push(data.filter((item) => item.发生地点 == road).length)
    })

    let roadArr = []
    for (let i = 0; i < roads.length; i++) {
      let obj = {}
      obj.type = roads[i]
      obj.value = values[i]
      roadArr.push(obj)
    }

    nextTick(() => {
      let dom1 = ref(document.querySelector('#type-charts'))
      if (dom1.value) {
        // 实现事件类型玫瑰图
        const typeRosePlot = new Rose('type-rose', {
          data: typeArr,
          xField: 'type',
          yField: 'value',
          seriesField: 'type',
          radius: 0.9,
          legend: {
            position: 'bottom'
          }
        })

        typeRosePlot.render()

        const typeColumnPlot = new Column('type-column', {
          data: typeArr,
          xField: 'type',
          yField: 'value',
          label: {
            // 可手动配置 label 数据标签位置
            position: 'middle', // 'top', 'bottom', 'middle',
            // 配置样式
            style: {
              fill: '#FFFFFF',
              opacity: 0.6
            }
          },
          xAxis: {
            label: {
              autoHide: true,
              autoRotate: false
            }
          },
          meta: {
            type: {
              alias: '事件数'
            },
            sales: {
              alias: '路段'
            }
          }
        })

        typeColumnPlot.render()
      }

      let dom = ref(document.querySelector('#road-charts'))
      if (dom.value) {
        const roadRosePlot = new Rose('road-rose', {
          data: roadArr,
          xField: 'type',
          yField: 'value',
          seriesField: 'type',
          radius: 0.9,
          legend: {
            position: 'bottom'
          },
          meta: {
            type: {
              alias: '路段'
            }
          }
        })
        roadRosePlot.render()

        const roadColumnPlot = new Column('road-column', {
          data: roadArr,
          xField: 'type',
          yField: 'value',
          label: {
            // 可手动配置 label 数据标签位置
            position: 'middle', // 'top', 'bottom', 'middle',
            // 配置样式
            style: {
              fill: '#FFFFFF',
              opacity: 0.6
            }
          },
          xAxis: {
            label: {
              autoHide: true,
              autoRotate: false
            }
          },
          meta: {
            type: {
              alias: '事件数'
            },
            sales: {
              alias: '路段'
            }
          }
        })

        roadColumnPlot.render()
      }
    })
  }
}

watch(
  () => typeShow.value,
  () => {
    queryEventData()
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
.container {
  display: flex;
  position: fixed;
  top: 100px;
  left: 170px;
  padding: 15px;
  width: 800px;
  height: 400px;
  max-height: 400px;
  z-index: 3;
  background-color: #fff;
  .close {
    position: absolute;
    top: 5px;
    left: 120px;
    width: 20px;
    height: 20px;
    font-size: 28px;
    text-align: center;
    line-height: 18px;
    border: 1px solid #ccc;
    padding: 3px;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    color: black;
    z-index: 4;
    transition: all 0.4s;
    &:hover {
      background-color: #fff;
      color: red;
    }
  }
  .change-btn {
    position: absolute;
    top: 5px;
    left: 3px;
    width: 100px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border: 1px solid #ccc;
    padding: 3px;
    border-radius: 3px;
    background-color: lightblue;
    cursor: pointer;
    color: #fff;
    z-index: 4;
    transition: all 0.4s;
    &:hover {
      background-color: #fff;
      color: lightblue;
    }
  }
  .charts {
    display: flex;
    width: 100%;
    .rose {
      width: 50%;
    }
    .column {
      width: 50%;
    }
  }
}
</style>
